২ সেপ্টেম্বর, ২০২৫বাংলা

সুবিন্যস্ত ফর্ম স্ট্যাটাস ব্যবস্থাপনার জন্য React-এর experimental_useFormStatus হুক সম্পর্কে জানুন। বাস্তব উদাহরণসহ এর প্রয়োগ, সুবিধা এবং উন্নত ব্যবহার শিখুন।

React experimental_useFormStatus এর প্রয়োগ: উন্নত ফর্ম স্ট্যাটাস ম্যানেজমেন্ট

React-এর ক্রমবর্ধমান পরিমণ্ডল ডেভেলপারদের অভিজ্ঞতা এবং অ্যাপ্লিকেশনের পারফরম্যান্স উন্নত করার জন্য ক্রমাগত নতুন টুল এবং কৌশল নিয়ে আসছে। এরকম একটি পরীক্ষামূলক বৈশিষ্ট্য হলো experimental_useFormStatus হুক, যা ফর্ম স্ট্যাটাস ম্যানেজমেন্টকে সহজ করার জন্য ডিজাইন করা হয়েছে, বিশেষ করে সার্ভার অ্যাকশন এবং প্রগ্রেসিভ এনহ্যান্সমেন্ট পরিস্থিতিতে। এই বিস্তারিত গাইডটি experimental_useFormStatus হুক সম্পর্কে বিশদভাবে আলোচনা করবে, এর কার্যকর ব্যবহারের জন্য বাস্তব উদাহরণ এবং অন্তর্দৃষ্টি প্রদান করবে।

`experimental_useFormStatus` কী?

experimental_useFormStatus হুকটি React টিমের দ্বারা প্রবর্তিত একটি পরীক্ষামূলক API, যা একটি ফর্ম সাবমিশনের স্ট্যাটাস ট্র্যাক করার জন্য একটি সহজ উপায় প্রদান করে, বিশেষ করে সার্ভার অ্যাকশন ব্যবহার করার সময়। এই হুকের আগে, একটি ফর্মের বিভিন্ন অবস্থা (idle, submitting, success, error) পরিচালনা করার জন্য প্রায়ই জটিল স্টেট ম্যানেজমেন্ট লজিকের প্রয়োজন হতো। experimental_useFormStatus এই জটিলতার বেশিরভাগ অংশকে বিমূর্ত করার লক্ষ্য রাখে, ফর্ম সাবমিশন অবস্থা নিরীক্ষণ এবং প্রতিক্রিয়া জানানোর জন্য একটি সহজ এবং কার্যকর উপায় প্রদান করে।

মূল সুবিধা:

সরলীকৃত স্টেট ম্যানেজমেন্ট: ফর্ম সাবমিশন স্টেট পরিচালনার জন্য প্রয়োজনীয় বয়লারপ্লেট কোড কমায়।
উন্নত ব্যবহারকারীর অভিজ্ঞতা: ফর্মের স্ট্যাটাসের উপর ভিত্তি করে আরও প্রতিক্রিয়াশীল UI আপডেট সক্ষম করে।
উন্নত কোড পঠনযোগ্যতা: ফর্ম-সম্পর্কিত কোড বোঝা এবং রক্ষণাবেক্ষণ করা সহজ করে তোলে।
সার্ভার অ্যাকশনের সাথে নির্বিঘ্ন ইন্টিগ্রেশন: বিশেষত React সার্ভার কম্পোনেন্ট এবং সার্ভার অ্যাকশনের সাথে ভালভাবে কাজ করার জন্য ডিজাইন করা হয়েছে।

মৌলিক প্রয়োগ

experimental_useFormStatus-এর মৌলিক প্রয়োগ দেখানোর জন্য, আসুন একটি সহজ কন্টাক্ট ফর্মের উদাহরণ বিবেচনা করি। এই ফর্মটি একজন ব্যবহারকারীর নাম, ইমেল এবং মেসেজ সংগ্রহ করবে এবং তারপর একটি সার্ভার অ্যাকশন ব্যবহার করে এটি সাবমিট করবে।

পূর্বশর্ত

কোডে যাওয়ার আগে, নিশ্চিত করুন যে আপনার একটি React প্রজেক্ট সেট আপ করা আছে যাতে নিম্নলিখিতগুলি রয়েছে:

React-এর এমন একটি সংস্করণ যা পরীক্ষামূলক API গুলি সমর্থন করে (প্রয়োজনীয় সংস্করণের জন্য React-এর ডকুমেন্টেশন দেখুন)।
React সার্ভার কম্পোনেন্ট সক্রিয় করা (সাধারণত Next.js বা Remix-এর মতো ফ্রেমওয়ার্কে ব্যবহৃত হয়)।

উদাহরণ: একটি সাধারণ কন্টাক্ট ফর্ম

এখানে একটি মৌলিক কন্টাক্ট ফর্ম কম্পোনেন্ট দেওয়া হলো:

```jsx // app/actions.js (সার্ভার অ্যাকশন) 'use server' export async function submitContactForm(formData) { // একটি ডেটাবেস কল বা API অনুরোধ সিমুলেট করুন await new Promise(resolve => setTimeout(resolve, 2000)); const name = formData.get('name'); const email = formData.get('email'); const message = formData.get('message'); if (!name || !email || !message) { return { success: false, message: 'সমস্ত ফিল্ড পূরণ করা আবশ্যক।' }; } try { // আসল API কল বা ডেটাবেস অপারেশন দিয়ে প্রতিস্থাপন করুন console.log('ফর্ম সাবমিট হয়েছে:', { name, email, message }); return { success: true, message: 'ফর্ম সফলভাবে জমা দেওয়া হয়েছে!' }; } catch (error) { console.error('ফর্ম জমা দিতে ত্রুটি:', error); return { success: false, message: 'ফর্ম জমা দিতে ব্যর্থ হয়েছে।' }; } } // app/components/ContactForm.jsx (ক্লায়েন্ট কম্পোনেন্ট) 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function ContactForm() { return (

নাম:

ইমেল:

বার্তা:

</div>
      <SubmitButton />
    </form>
  );
}
```

<ul>
  <li><b>সার্ভার অ্যাকশন (<code>app/actions.js</code>):</b> এই ফাইলটি <code>submitContactForm</code> ফাংশনটি সংজ্ঞায়িত করে, যা একটি সার্ভার অ্যাকশন। এটি ফর্ম সাবমিশনের অ্যাসিঙ্ক্রোনাস প্রকৃতি প্রদর্শনের জন্য ২-সেকেন্ডের বিলম্ব সহ একটি API অনুরোধ অনুকরণ করে। এটি প্রাথমিক বৈধতা এবং ত্রুটি পরিচালনাও করে।</li>
  <li><b>ক্লায়েন্ট কম্পোনেন্ট (<code>app/components/ContactForm.jsx</code>):</b> এই ফাইলটি <code>ContactForm</code> কম্পোনেন্টকে সংজ্ঞায়িত করে, যা একটি ক্লায়েন্ট কম্পোনেন্ট। এটি <code>experimental_useFormStatus</code> হুক এবং <code>submitContactForm</code> অ্যাকশন ইম্পোর্ট করে।</li>
  <li><b><code>useFormStatus</code> ব্যবহার:</b> <code>SubmitButton</code> কম্পোনেন্টের ভিতরে <code>useFormStatus</code> কল করা হয়। এই হুক ফর্মের সাবমিশন স্ট্যাটাস সম্পর্কে তথ্য প্রদান করে।</li>
  <li><b><code>pending</code> প্রপার্টি:</b> <code>useFormStatus</code> দ্বারা প্রত্যাবর্তিত <code>pending</code> প্রপার্টিটি নির্দেশ করে যে ফর্মটি বর্তমানে জমা দেওয়া হচ্ছে কিনা। এটি সাবমিট বোতামটি নিষ্ক্রিয় করতে এবং একটি "জমা হচ্ছে..." বার্তা প্রদর্শন করতে ব্যবহৃত হয়।</li>
  <li><b>ফর্ম বাইন্ডিং:</b> <code>form</code> এলিমেন্টের <code>action</code> প্রপ <code>submitContactForm</code> সার্ভার অ্যাকশনের সাথে আবদ্ধ। এটি React-কে বলে যে ফর্ম জমা দেওয়া হলে সার্ভার অ্যাকশনটি চালু করতে হবে।</li>
</ul>

<h2>উন্নত ব্যবহার এবং বিবেচ্য বিষয়</h2>

<h3>সফলতা এবং ত্রুটির অবস্থা পরিচালনা</h3>

<p>যদিও <code>experimental_useFormStatus</code> সাবমিশন স্ট্যাটাস ট্র্যাক করা সহজ করে, আপনাকে প্রায়শই সফলতা এবং ত্রুটির অবস্থা স্পষ্টভাবে পরিচালনা করতে হয়। সার্ভার অ্যাকশন ডেটা ফেরত দিতে পারে যা সফলতা বা ব্যর্থতা নির্দেশ করে, যা আপনি UI আপডেট করতে ব্যবহার করতে পারেন।</p>

<p><b>উদাহরণ:</b></p>

```jsx
// app/components/ContactForm.jsx (পরিবর্তিত)
'use client'

import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()

return (
    <button type="submit" disabled={pending}>
      {pending ? 'জমা হচ্ছে...' : 'জমা দিন'}
    </button>
  )
}

export default function ContactForm() {
  const [message, setMessage] = useState(null);

async function handleSubmit(formData) {
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">নাম:</label>
          <input type="text" id="name" name="name" required />
        </div>
        <div>
          <label htmlFor="email">ইমেল:</label>
          <input type="email" id="email" name="email" required />
        </div>
        <div>
          <label htmlFor="message">বার্তা:</label>
          <textarea id="message" name="message" required />
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<ul>
  <li><b>বার্তার জন্য স্টেট:</b> সার্ভার অ্যাকশন দ্বারা ফেরত আসা ফলাফল সংরক্ষণ করার জন্য একটি <code>message</code> স্টেট ভেরিয়েবল চালু করা হয়েছে।</li>
  <li><b>ফলাফল পরিচালনা:</b> ফর্ম জমা দেওয়ার পরে, <code>handleSubmit</code> ফাংশনটি সার্ভার অ্যাকশন থেকে প্রাপ্ত ফলাফল দিয়ে <code>message</code> স্টেট আপডেট করে।</li>
  <li><b>বার্তা প্রদর্শন:</b> কম্পোনেন্টটি ফলাফলের <code>success</code> প্রপার্টির উপর ভিত্তি করে বার্তা প্রদর্শন করে, সফলতা এবং ত্রুটির অবস্থার জন্য বিভিন্ন CSS ক্লাস প্রয়োগ করে।</li>
</ul>

<h3>প্রগ্রেসিভ এনহ্যান্সমেন্ট</h3>

<p><code>experimental_useFormStatus</code> প্রগ্রেসিভ এনহ্যান্সমেন্ট পরিস্থিতিতে বিশেষভাবে কার্যকর। React দ্বারা একটি স্ট্যান্ডার্ড HTML ফর্মকে ক্রমান্বয়ে উন্নত করার মাধ্যমে, জাভাস্ক্রিপ্ট ব্যর্থ হলেও আপনি মৌলিক কার্যকারিতা ত্যাগ না করে একটি উন্নত ব্যবহারকারীর অভিজ্ঞতা প্রদান করতে পারেন।</p>

<p><b>উদাহরণ:</b></p>

<p>একটি মৌলিক HTML ফর্ম দিয়ে শুরু করা যাক:</p>

```html

<form action="/submit-contact" method="post">
  <div>
    <label for="name">নাম:</label>
    <input type="text" id="name" name="name" required />
  </div>
  <div>
    <label for="email">ইমেল:</label>
    <input type="email" id="email" name="email" required />
  </div>
  <div>
    <label for="message">বার্তা:</label>
    <textarea id="message" name="message" required>

```

আপনি তারপর React এবং experimental_useFormStatus দিয়ে এটিকে ক্রমান্বয়ে উন্নত করতে পারেন।

```jsx // app/components/EnhancedContactForm.jsx 'use client' import { experimental_useFormStatus as useFormStatus } from 'react' import { submitContactForm } from '../actions' import { useState } from 'react'; import { useFormState } from 'react-dom'; function SubmitButton() { const { pending } = useFormStatus() return ( ) } export default function EnhancedContactForm() { const [message, setMessage] = useState(null); const [state, formAction] = useFormState(submitContactForm, null); // প্রাথমিক স্টেট হিসেবে null ব্যবহার করুন যদি এর উপর নির্ভর না করেন return (

নাম:

ইমেল:

বার্তা:

</div>
        <SubmitButton />
		{state?.message && (
        <p className={state.success ? 'success' : 'error'}>
          {state.message}
        </p>
      )}
      </form>
    </div>
  );
}
```

<ul>
  <li><b>প্রাথমিক HTML ফর্ম:</b> <code>public/contact.html</code> ফাইলে একটি স্ট্যান্ডার্ড HTML ফর্ম রয়েছে যা জাভাস্ক্রিপ্ট ছাড়াও কাজ করবে।</li>
  <li><b>প্রগ্রেসিভ এনহ্যান্সমেন্ট:</b> <code>EnhancedContactForm</code> কম্পোনেন্ট HTML ফর্মটিকে ক্রমান্বয়ে উন্নত করে। যদি জাভাস্ক্রিপ্ট সক্রিয় থাকে, React দায়িত্ব নেয় এবং একটি সমৃদ্ধ ব্যবহারকারীর অভিজ্ঞতা প্রদান করে।</li>
  <li><b><code>useFormState</code> হুক:</b> ফর্ম স্টেট পরিচালনা এবং সার্ভার অ্যাকশনকে ফর্মের সাথে বাইন্ড করার জন্য <code>useFormState</code> ব্যবহার করা হয়।</li>
	<li> <b><code>state</code>:</b> <code>useFormState</code> থেকে প্রাপ্ত <code>state</code> এখন সার্ভার অ্যাকশন থেকে ফেরত আসা মান ধারণ করে, যা সফলতা বা ত্রুটির বার্তার জন্য পরীক্ষা করা যেতে পারে।</li>
</ul>

<h3>আন্তর্জাতিক বিবেচ্য বিষয়</h3>

<p>বিশ্বব্যাপী দর্শকদের জন্য ফর্ম প্রয়োগ করার সময়, বেশ কিছু আন্তর্জাতিক বিষয় বিবেচনা করতে হয়:</p>

<ul>
  <li><b>লোকালাইজেশন:</b> নিশ্চিত করুন আপনার ফর্মের লেবেল, বার্তা এবং ত্রুটির বার্তাগুলি বিভিন্ন ভাষায় স্থানীয়করণ করা হয়েছে। i18next-এর মতো টুলগুলি অনুবাদ পরিচালনা করতে সাহায্য করতে পারে।</li>
  <li><b>তারিখ এবং সংখ্যা ফরম্যাট:</b> ব্যবহারকারীর লোকেল অনুযায়ী তারিখ এবং সংখ্যার ফরম্যাট পরিচালনা করুন। তারিখ এবং সংখ্যা সঠিকভাবে ফরম্যাট করতে <code>Intl</code> বা <code>moment.js</code> (তারিখ ফরম্যাটিংয়ের জন্য, যদিও এটি এখন লিগ্যাসি হিসাবে বিবেচিত) এর মতো লাইব্রেরি ব্যবহার করুন।</li>
  <li><b>ঠিকানার ফরম্যাট:</b> বিভিন্ন দেশের ঠিকানার ফরম্যাট ভিন্ন। এমন একটি লাইব্রেরি ব্যবহার করার কথা বিবেচনা করুন যা একাধিক ঠিকানার ফরম্যাট সমর্থন করে বা ব্যবহারকারীর অবস্থানের উপর ভিত্তি করে কাস্টম ফর্ম ফিল্ড তৈরি করুন।</li>
  <li><b>ফোন নম্বর ভ্যালিডেশন:</b> আন্তর্জাতিক মান অনুযায়ী ফোন নম্বর যাচাই করুন। <code>libphonenumber-js</code>-এর মতো লাইব্রেরিগুলি এতে সাহায্য করতে পারে।</li>
  <li><b>ডান-থেকে-বামে (RTL) সমর্থন:</b> নিশ্চিত করুন আপনার ফর্ম লেআউট আরবি বা হিব্রুর মতো RTL ভাষা সমর্থন করে। উন্নত RTL সমর্থনের জন্য CSS লজিকাল প্রপার্টি (যেমন, <code>margin-left</code>-এর পরিবর্তে <code>margin-inline-start</code>) ব্যবহার করুন।</li>
  <li><b>অ্যাক্সেসিবিলিটি:</b> অ্যাক্সেসিবিলিটি নির্দেশিকা (WCAG) মেনে চলুন যাতে আপনার ফর্মগুলি প্রতিবন্ধী ব্যক্তিরা তাদের অবস্থান নির্বিশেষে ব্যবহার করতে পারেন।</li>
</ul>

<p><b>উদাহরণ: স্থানীয়করণ করা ফর্ম লেবেল</b></p>

```jsx
// i18n/locales/en.json
{
  "contactForm": {
    "nameLabel": "Name",
    "emailLabel": "Email",
    "messageLabel": "Message",
    "submitButton": "Submit",
    "successMessage": "Form submitted successfully!",
    "errorMessage": "Failed to submit form."
  }
}

// i18n/locales/bn.json
{
  "contactForm": {
    "nameLabel": "নাম",
    "emailLabel": "ইমেল",
    "messageLabel": "বার্তা",
    "submitButton": "জমা দিন",
    "successMessage": "ফর্ম সফলভাবে জমা দেওয়া হয়েছে!",
    "errorMessage": "ফর্ম জমা দিতে ব্যর্থ হয়েছে।"
  }
}

// app/components/LocalizedContactForm.jsx
'use client'

import { useTranslation } from 'react-i18next';
import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()
  const { t } = useTranslation();

return (
    <button type="submit" disabled={pending}>
      {pending ? t('contactForm.submitButton', {ns: 'contactForm'}) : t('contactForm.submitButton', {ns: 'contactForm'})}
    </button>
  )
}

export default function LocalizedContactForm() {
  const { t } = useTranslation();
  const [message, setMessage] = useState(null);

async function handleSubmit(formData) {
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">{t('contactForm.nameLabel', {ns: 'contactForm'})}:</label>
          <input type="text" id="name" name="name" required />
        </div>
        <div>
          <label htmlFor="email">{t('contactForm.emailLabel', {ns: 'contactForm'})}:</label>
          <input type="email" id="email" name="email" required />
        </div>
        <div>
          <label htmlFor="message">{t('contactForm.messageLabel', {ns: 'contactForm'})}:</label>
          <textarea id="message" name="message" required />
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<ul>
  <li><b>অনুবাদ ফাইল:</b> উদাহরণটি অনুবাদ পরিচালনার জন্য <code>react-i18next</code> ব্যবহার করে। পৃথক JSON ফাইলগুলিতে বিভিন্ন ভাষার জন্য অনুবাদ রয়েছে।</li>
  <li><b><code>useTranslation</code> হুক:</b> <code>useTranslation</code> হুকটি অনুবাদ ফাংশন (<code>t</code>) এ অ্যাক্সেস সরবরাহ করে, যা স্থানীয়করণ করা স্ট্রিংগুলি পুনরুদ্ধার করতে ব্যবহৃত হয়।</li>
  <li><b>স্থানীয়করণ করা লেবেল:</b> ফর্ম লেবেল এবং বোতামের পাঠ্য <code>t</code> ফাংশন ব্যবহার করে পুনরুদ্ধার করা হয়, যা নিশ্চিত করে যে সেগুলি ব্যবহারকারীর পছন্দের ভাষায় প্রদর্শিত হয়।</li>
</ul>

<h3>অ্যাক্সেসিবিলিটি বিবেচ্য বিষয়</h3>

<p>প্রতিবন্ধী ব্যক্তিসহ সকল ব্যবহারকারীর জন্য আপনার ফর্মগুলি অ্যাক্সেসযোগ্য করা অত্যন্ত গুরুত্বপূর্ণ। এখানে কিছু মূল অ্যাক্সেসিবিলিটি বিবেচ্য বিষয় রয়েছে:</p>

<ul>
  <li><b>সিমান্টিক HTML:</b> <code><label></code>, <code><input></code>, <code><textarea></code>, এবং <code><button></code> এর মতো সিমান্টিক HTML এলিমেন্ট সঠিকভাবে ব্যবহার করুন।</li>
  <li><b>লেবেল:</b> <code><label></code>-এ <code>for</code> অ্যাট্রিবিউট এবং ফর্ম কন্ট্রোলে <code>id</code> অ্যাট্রিবিউট ব্যবহার করে ফর্ম কন্ট্রোলের সাথে লেবেল যুক্ত করুন।</li>
  <li><b>ARIA অ্যাট্রিবিউট:</b> সহায়ক প্রযুক্তিগুলিতে অতিরিক্ত তথ্য সরবরাহ করতে ARIA অ্যাট্রিবিউট ব্যবহার করুন। উদাহরণস্বরূপ, একটি ফর্ম কন্ট্রোলকে একটি বিবরণের সাথে লিঙ্ক করতে <code>aria-describedby</code> ব্যবহার করুন।</li>
  <li><b>ত্রুটি পরিচালনা:</b> স্পষ্টভাবে ত্রুটিগুলি নির্দেশ করুন এবং সহায়ক ত্রুটি বার্তা সরবরাহ করুন। অবৈধ ফর্ম কন্ট্রোল নির্দেশ করতে <code>aria-invalid</code>-এর মতো ARIA অ্যাট্রিবিউট ব্যবহার করুন।</li>
  <li><b>কিবোর্ড নেভিগেশন:</b> নিশ্চিত করুন ব্যবহারকারীরা কিবোর্ড ব্যবহার করে ফর্মটি নেভিগেট করতে পারেন। প্রয়োজনে ফোকাস অর্ডার নিয়ন্ত্রণ করতে <code>tabindex</code> অ্যাট্রিবিউট ব্যবহার করুন।</li>
  <li><b>রঙের কনট্রাস্ট:</b> পাঠ্য এবং পটভূমির রঙের মধ্যে পর্যাপ্ত রঙের কনট্রাস্ট নিশ্চিত করুন।</li>
  <li><b>ফর্মের কাঠামো:</b> স্পষ্ট এবং সামঞ্জস্যপূর্ণ ফর্ম কাঠামো ব্যবহার করুন। সম্পর্কিত ফর্ম কন্ট্রোলগুলি গ্রুপ করতে <code><fieldset></code> এবং <code><legend></code> এলিমেন্ট ব্যবহার করুন।</li>
</ul>

<p><b>উদাহরণ: অ্যাক্সেসযোগ্য ত্রুটি পরিচালনা</b></p>

```jsx
// app/components/AccessibleContactForm.jsx
'use client'

import { experimental_useFormStatus as useFormStatus } from 'react'
import { submitContactForm } from '../actions'
import { useState } from 'react';

function SubmitButton() {
  const { pending } = useFormStatus()

return (
    <button type="submit" disabled={pending}>
      {pending ? 'জমা হচ্ছে...' : 'জমা দিন'}
    </button>
  )
}

export default function AccessibleContactForm() {
  const [message, setMessage] = useState(null);
  const [errors, setErrors] = useState({});

async function handleSubmit(formData) {
    // মৌলিক ক্লায়েন্ট-সাইড ভ্যালিডেশন
    const newErrors = {};
    if (!formData.get('name')) {
      newErrors.name = 'নাম আবশ্যক।';
    }
    if (!formData.get('email')) {
      newErrors.email = 'ইমেল আবশ্যক।';
    }
    if (!formData.get('message')) {
      newErrors.message = 'বার্তা আবশ্যক।';
    }

if (Object.keys(newErrors).length > 0) {
      setErrors(newErrors);
      return;
    }

setErrors({}); // পূর্ববর্তী ত্রুটিগুলি পরিষ্কার করুন
    const result = await submitContactForm(formData);
    setMessage(result);
  }

return (
    <div>
      <form action={handleSubmit}>
        <div>
          <label htmlFor="name">নাম:</label>
          <input
            type="text"
            id="name"
            name="name"
            aria-invalid={!!errors.name}
            aria-describedby="name-error"
            required
          />
          {errors.name && (
            <p id="name-error" className="error">
              {errors.name}
            </p>
          )}
        </div>
        <div>
          <label htmlFor="email">ইমেল:</label>
          <input
            type="email"
            id="email"
            name="email"
            aria-invalid={!!errors.email}
            aria-describedby="email-error"
            required
          />
          {errors.email && (
            <p id="email-error" className="error">
              {errors.email}
            </p>
          )}
        </div>
        <div>
          <label htmlFor="message">বার্তা:</label>
          <textarea
            id="message"
            name="message"
            aria-invalid={!!errors.message}
            aria-describedby="message-error"
            required
          />
          {errors.message && (
            <p id="message-error" className="error">
              {errors.message}
            </p>
          )}
        </div>
        <SubmitButton />
      </form>
      {message && (
        <p className={message.success ? 'success' : 'error'}>
          {message.message}
        </p>
      )}
    </div>
  );
}
```

<ul>
  <li><b>ত্রুটির অবস্থা:</b> কম্পোনেন্টটি ভ্যালিডেশন ত্রুটি ট্র্যাক করার জন্য একটি <code>errors</code> স্টেট বজায় রাখে।</li>
  <li><b>ক্লায়েন্ট-সাইড ভ্যালিডেশন:</b> <code>handleSubmit</code> ফাংশনটি ফর্ম জমা দেওয়ার আগে মৌলিক ক্লায়েন্ট-সাইড ভ্যালিডেশন সম্পাদন করে।</li>
  <li><b>ARIA অ্যাট্রিবিউট:</b> যদি একটি নির্দিষ্ট ফর্ম কন্ট্রোলের জন্য কোনো ত্রুটি থাকে তবে <code>aria-invalid</code> অ্যাট্রিবিউট <code>true</code> তে সেট করা হয়। <code>aria-describedby</code> অ্যাট্রিবিউট ফর্ম কন্ট্রোলটিকে ত্রুটি বার্তার সাথে লিঙ্ক করে।</li>
  <li><b>ত্রুটি বার্তা:</b> ত্রুটি বার্তাগুলি সংশ্লিষ্ট ফর্ম কন্ট্রোলের পাশে প্রদর্শিত হয়।</li>
</ul>

<h2>সম্ভাব্য চ্যালেঞ্জ এবং সীমাবদ্ধতা</h2>

<ul>
  <li><b>পরীক্ষামূলক অবস্থা:</b> একটি পরীক্ষামূলক API হওয়ায়, <code>experimental_useFormStatus</code> ভবিষ্যতে React সংস্করণে পরিবর্তন বা অপসারণের বিষয় হতে পারে। React-এর ডকুমেন্টেশনের সাথে আপডেট থাকা এবং প্রয়োজনে আপনার কোড মানিয়ে নেওয়ার জন্য প্রস্তুত থাকা অপরিহার্য।</li>
  <li><b>সীমিত পরিধি:</b> এই হুকটি মূলত সাবমিশন স্ট্যাটাস ট্র্যাক করার উপর মনোযোগ দেয় এবং ভ্যালিডেশন বা ডেটা পরিচালনার মতো ব্যাপক ফর্ম ম্যানেজমেন্ট বৈশিষ্ট্য সরবরাহ করে না। এই দিকগুলির জন্য আপনাকে এখনও অতিরিক্ত লজিক প্রয়োগ করতে হতে পারে।</li>
  <li><b>সার্ভার অ্যাকশন নির্ভরতা:</b> হুকটি সার্ভার অ্যাকশনের সাথে কাজ করার জন্য ডিজাইন করা হয়েছে, যা সব ব্যবহারের ক্ষেত্রে উপযুক্ত নাও হতে পারে। যদি আপনি সার্ভার অ্যাকশন ব্যবহার না করেন, তাহলে আপনাকে ফর্ম স্ট্যাটাস পরিচালনার জন্য বিকল্প সমাধান খুঁজে বের করতে হতে পারে।</li>
</ul>

<h2>উপসংহার</h2>

<p><code>experimental_useFormStatus</code> হুকটি React-এ ফর্ম সাবমিশন অবস্থা পরিচালনায় একটি উল্লেখযোগ্য উন্নতি প্রদান করে, বিশেষত সার্ভার অ্যাকশন এবং প্রগ্রেসিভ এনহ্যান্সমেন্ট নিয়ে কাজ করার সময়। স্টেট ম্যানেজমেন্টকে সহজ করে এবং একটি স্পষ্ট ও সংক্ষিপ্ত API প্রদান করে, এটি ডেভেলপার এবং ব্যবহারকারীর অভিজ্ঞতা উভয়কেই উন্নত করে। তবে, এর পরীক্ষামূলক প্রকৃতির কারণে, ভবিষ্যতের React সংস্করণে আপডেট এবং সম্ভাব্য পরিবর্তন সম্পর্কে অবহিত থাকা অত্যন্ত গুরুত্বপূর্ণ। এর সুবিধা, সীমাবদ্ধতা এবং সেরা অনুশীলনগুলি বোঝার মাধ্যমে, আপনি আপনার React অ্যাপ্লিকেশনগুলিতে আরও শক্তিশালী এবং ব্যবহারকারী-বান্ধব ফর্ম তৈরি করতে <code>experimental_useFormStatus</code> কার্যকরভাবে ব্যবহার করতে পারেন। বিশ্বব্যাপী দর্শকদের জন্য অন্তর্ভুক্তিমূলক ফর্ম তৈরি করতে আন্তর্জাতিকীকরণ এবং অ্যাক্সেসিবিলিটি সেরা অনুশীলনগুলি বিবেচনা করতে ভুলবেন না।</p></div><footer class="mt-12 pt-8 border-t border-gray-200"><h3 class="text-sm font-semibold text-gray-900 mb-3 dark:text-white/90">Tags:</h3><div class="flex flex-wrap gap-2"><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">রিয়্যাক্ট</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">useFormStatus</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ফর্ম স্ট্যাটাস</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">রিয়্যাক্ট ফর্ম</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">এক্সপেরিমেন্টাল এপিআই</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">রিয়্যাক্ট হুকস</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">ফর্ম সাবমিশন</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">অ্যাসিঙ্ক্রোনাস ফর্ম</span><span class="inline-block bg-gray-100 text-gray-800 px-3 py-1 rounded-full text-sm hover:bg-gray-200 transition-colors dark:bg-neutral-800 dark:text-white dark:hover:bg-neutral-700">প্রগ্রেসিভ এনহ্যান্সমেন্ট</span></div></footer></article></div><script>$RS=function(a,b){a=document.getElementById(a);b=document.getElementById(b);for(a.parentNode.removeChild(a);a.firstChild;)b.parentNode.insertBefore(a.firstChild,b);b.parentNode.removeChild(b)};$RS("S:2","P:2")</script><script>$RB=[];$RV=function(b){$RT=performance.now();for(var a=0;a<b.length;a+=2){var c=b[a],e=b[a+1];null!==e.parentNode&&e.parentNode.removeChild(e);var f=c.parentNode;if(f){var g=c.previousSibling,h=0;do{if(c&&8===c.nodeType){var d=c.data;if("/$"===d||"/&"===d)if(0===h)break;else h--;else"$"!==d&&"$?"!==d&&"$~"!==d&&"$!"!==d&&"&"!==d||h++}d=c.nextSibling;f.removeChild(c);c=d}while(c);for(;e.firstChild;)f.insertBefore(e.firstChild,c);g.data="$";g._reactRetry&&g._reactRetry()}}b.length=0};
$RC=function(b,a){if(a=document.getElementById(a))(b=document.getElementById(b))?(b.previousSibling.data="$~",$RB.push(b,a),2===$RB.length&&(b="number"!==typeof $RT?0:$RT,a=performance.now(),setTimeout($RV.bind(null,$RB),2300>a&&2E3<a?2300-a:b+300-a))):a.parentNode.removeChild(a)};$RC("B:1","S:1")</script><div style="display:none" id="S:3"></div><script>$RC("B:3","S:3")</script><div style="display:none" id="S:0"><template id="P:4"></template><template id="P:5"></template><template id="P:6"></template><template id="P:7"></template><template id="P:8"></template><template id="P:9"></template><template id="P:a"></template><template id="P:b"></template><template id="P:c"></template><template id="P:d"></template><template id="P:e"></template><template id="P:f"></template><template id="P:10"></template><template id="P:11"></template><template id="P:12"></template><template id="P:13"></template><template id="P:14"></template><template id="P:15"></template><template id="P:16"></template><template id="P:17"></template><template id="P:18"></template><template id="P:19"></template><template id="P:1a"></template><template id="P:1b"></template><template id="P:1c"></template><template id="P:1d"></template><template id="P:1e"></template><template id="P:1f"></template><template id="P:20"></template><template id="P:21"></template><template id="P:22"></template><template id="P:23"></template><template id="P:24"></template><template id="P:25"></template><template id="P:26"></template><template id="P:27"></template><template id="P:28"></template><template id="P:29"></template><template id="P:2a"></template><template id="P:2b"></template><template id="P:2c"></template><template id="P:2d"></template><template id="P:2e"></template><template id="P:2f"></template><template id="P:30"></template><template id="P:31"></template><template id="P:32"></template><template id="P:33"></template><template id="P:34"></template><template id="P:35"></template><template id="P:36"></template><template id="P:37"></template><template id="P:38"></template><template id="P:39"></template><template id="P:3a"></template><template id="P:3b"></template><template id="P:3c"></template><template id="P:3d"></template><template id="P:3e"></template><template id="P:3f"></template><template id="P:40"></template><template id="P:41"></template><template id="P:42"></template><template id="P:43"></template><template id="P:44"></template><template id="P:45"></template><template id="P:46"></template></div><link rel="alternate" hrefLang="ko" href="https://mlog.uz/ko/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="ar" href="https://mlog.uz/ar/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="hi" href="https://mlog.uz/hi/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="tr" href="https://mlog.uz/tr/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="nl" href="https://mlog.uz/nl/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="pl" href="https://mlog.uz/pl/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="sv" href="https://mlog.uz/sv/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="no" href="https://mlog.uz/no/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="da" href="https://mlog.uz/da/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="fi" href="https://mlog.uz/fi/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="cs" href="https://mlog.uz/cs/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="hu" href="https://mlog.uz/hu/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="ro" href="https://mlog.uz/ro/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="bg" href="https://mlog.uz/bg/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="hr" href="https://mlog.uz/hr/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="sk" href="https://mlog.uz/sk/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="sl" href="https://mlog.uz/sl/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="et" href="https://mlog.uz/et/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="lv" href="https://mlog.uz/lv/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="lt" href="https://mlog.uz/lt/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="el" href="https://mlog.uz/el/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="he" href="https://mlog.uz/he/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="th" href="https://mlog.uz/th/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="vi" href="https://mlog.uz/vi/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="id" href="https://mlog.uz/id/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="bn" href="https://mlog.uz/bn/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="uk" href="https://mlog.uz/uk/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="uz" href="https://mlog.uz/uz/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="fa" href="https://mlog.uz/fa/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="gu" href="https://mlog.uz/gu/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="kn" href="https://mlog.uz/kn/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="ml" href="https://mlog.uz/ml/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="mr" href="https://mlog.uz/mr/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="ta" href="https://mlog.uz/ta/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="te" href="https://mlog.uz/te/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><link rel="alternate" hrefLang="x-default" href="https://mlog.uz/en/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><meta name="format-detection" content="telephone=no, address=no, email=no"/><meta name="google-site-verification" content="your-google-verification-code"/><meta name="yandex-verification" content="your-yandex-verification-code"/><meta property="og:title" content="React experimental_useFormStatus এর প্রয়োগ: উন্নত ফর্ম স্ট্যাটাস ম্যানেজমেন্ট"/><meta property="og:description" content="সুবিন্যস্ত ফর্ম স্ট্যাটাস ব্যবস্থাপনার জন্য React-এর experimental_useFormStatus হুক সম্পর্কে জানুন। বাস্তব উদাহরণসহ এর প্রয়োগ, সুবিধা এবং উন্নত ব্যবহার শিখুন।"/><meta property="og:url" content="https://mlog.uz/bn/blog/React%20experimental_useFormStatus%20Implementation%3A%20Enhanced%20Form%20Status%20Management"/><meta property="og:site_name" content="MLOG - Blog Platform"/><meta property="og:locale" content="bn"/><meta property="og:type" content="article"/><meta property="article:published_time" content="2025-09-02T08:47:51.857Z"/><meta property="article:modified_time" content="2025-09-02T08:47:51.857Z"/><meta property="article:author" content="MEZES"/><meta property="article:tag" content="রিয়্যাক্ট"/><meta property="article:tag" content="useFormStatus"/><meta property="article:tag" content="ফর্ম স্ট্যাটাস"/><meta property="article:tag" content="রিয়্যাক্ট ফর্ম"/><meta property="article:tag" content="এক্সপেরিমেন্টাল এপিআই"/><meta property="article:tag" content="রিয়্যাক্ট হুকস"/><meta property="article:tag" content="ফর্ম সাবমিশন"/><meta property="article:tag" content="অ্যাসিঙ্ক্রোনাস ফর্ম"/><meta property="article:tag" content="প্রগ্রেসিভ এনহ্যান্সমেন্ট"/><meta name="twitter:card" content="summary_large_image"/><meta name="twitter:site" content="mlog.uz"/><meta name="twitter:creator" content="MEZES"/><meta name="twitter:title" content="React experimental_useFormStatus এর প্রয়োগ: উন্নত ফর্ম স্ট্যাটাস ম্যানেজমেন্ট"/><meta name="twitter:description" content="সুবিন্যস্ত ফর্ম স্ট্যাটাস ব্যবস্থাপনার জন্য React-এর experimental_useFormStatus হুক সম্পর্কে জানুন। বাস্তব উদাহরণসহ এর প্রয়োগ, সুবিধা এবং উন্নত ব্যবহার শিখুন।"/><meta name="twitter:image" content="https://mlog.uz/images/mlog.jpg"/><link rel="icon" href="/favicon.ico" type="image/x-icon" sizes="32x32"/><link rel="icon" href="/images/mlog-192.png"/><link rel="apple-touch-icon" href="/images/mlog-192.png"/><script >document.querySelectorAll('body link[rel="icon"], body link[rel="apple-touch-icon"]').forEach(el => document.head.appendChild(el))</script><div hidden id="S:4"></div><script>$RS("S:4","P:4")</script><div hidden id="S:5"></div><script>$RS("S:5","P:5")</script><div hidden id="S:6"></div><script>$RS("S:6","P:6")</script><div hidden id="S:7"></div><script>$RS("S:7","P:7")</script><div hidden id="S:8"></div><script>$RS("S:8","P:8")</script><div hidden id="S:9"></div><script>$RS("S:9","P:9")</script><div hidden id="S:a"></div><script>$RS("S:a","P:a")</script><div hidden id="S:b"></div><script>$RS("S:b","P:b")</script><div hidden id="S:c"></div><script>$RS("S:c","P:c")</script><div hidden id="S:d"></div><script>$RS("S:d","P:d")</script><div hidden id="S:e"></div><script>$RS("S:e","P:e")</script><div hidden id="S:f"></div><script>$RS("S:f","P:f")</script><div hidden id="S:10"></div><script>$RS("S:10","P:10")</script><div hidden id="S:11"></div><script>$RS("S:11","P:11")</script><div hidden id="S:12"></div><script>$RS("S:12","P:12")</script><div hidden id="S:13"></div><script>$RS("S:13","P:13")</script><div hidden id="S:14"></div><script>$RS("S:14","P:14")</script><div hidden id="S:15"></div><script>$RS("S:15","P:15")</script><div hidden id="S:16"></div><script>$RS("S:16","P:16")</script><div hidden id="S:17"></div><script>$RS("S:17","P:17")</script><div hidden id="S:18"></div><script>$RS("S:18","P:18")</script><div hidden id="S:19"></div><script>$RS("S:19","P:19")</script><div hidden id="S:1a"></div><script>$RS("S:1a","P:1a")</script><div hidden id="S:1b"></div><script>$RS("S:1b","P:1b")</script><div hidden id="S:1c"></div><script>$RS("S:1c","P:1c")</script><div hidden id="S:1d"></div><script>$RS("S:1d","P:1d")</script><div hidden id="S:1e"></div><script>$RS("S:1e","P:1e")</script><div hidden id="S:1f"></div><script>$RS("S:1f","P:1f")</script><div hidden id="S:20"></div><script>$RS("S:20","P:20")</script><div hidden id="S:21"></div><script>$RS("S:21","P:21")</script><div hidden id="S:22"></div><script>$RS("S:22","P:22")</script><div hidden id="S:23"></div><script>$RS("S:23","P:23")</script><div hidden id="S:24"></div><script>$RS("S:24","P:24")</script><div hidden id="S:25"></div><script>$RS("S:25","P:25")</script><div hidden id="S:26"></div><script>$RS("S:26","P:26")</script><div hidden id="S:27"></div><script>$RS("S:27","P:27")</script><div hidden id="S:28"></div><script>$RS("S:28","P:28")</script><div hidden id="S:29"></div><script>$RS("S:29","P:29")</script><div hidden id="S:2a"></div><script>$RS("S:2a","P:2a")</script><div hidden id="S:2b"></div><script>$RS("S:2b","P:2b")</script><div hidden id="S:2c"></div><script>$RS("S:2c","P:2c")</script><div hidden id="S:2d"></div><script>$RS("S:2d","P:2d")</script><div hidden id="S:2e"></div><script>$RS("S:2e","P:2e")</script><div hidden id="S:2f"></div><script>$RS("S:2f","P:2f")</script><div hidden id="S:30"></div><script>$RS("S:30","P:30")</script><div hidden id="S:31"></div><script>$RS("S:31","P:31")</script><div hidden id="S:32"></div><script>$RS("S:32","P:32")</script><div hidden id="S:33"></div><script>$RS("S:33","P:33")</script><div hidden id="S:34"></div><script>$RS("S:34","P:34")</script><div hidden id="S:35"></div><script>$RS("S:35","P:35")</script><div hidden id="S:36"></div><script>$RS("S:36","P:36")</script><div hidden id="S:37"></div><script>$RS("S:37","P:37")</script><div hidden id="S:38"></div><script>$RS("S:38","P:38")</script><div hidden id="S:39"></div><script>$RS("S:39","P:39")</script><div hidden id="S:3a"></div><script>$RS("S:3a","P:3a")</script><div hidden id="S:3b"></div><script>$RS("S:3b","P:3b")</script><div hidden id="S:3c"></div><script>$RS("S:3c","P:3c")</script><div hidden id="S:3d"></div><script>$RS("S:3d","P:3d")</script><div hidden id="S:3e"></div><script>$RS("S:3e","P:3e")</script><div hidden id="S:3f"></div><script>$RS("S:3f","P:3f")</script><div hidden id="S:40"></div><script>$RS("S:40","P:40")</script><div hidden id="S:41"></div><script>$RS("S:41","P:41")</script><div hidden id="S:42"></div><script>$RS("S:42","P:42")</script><div hidden id="S:43"></div><script>$RS("S:43","P:43")</script><div hidden id="S:44"></div><script>$RS("S:44","P:44")</script><div hidden id="S:45"></div><script>$RS("S:45","P:45")</script><div hidden id="S:46"></div><script>$RS("S:46","P:46")</script><script>$RC("B:0","S:0")</script></body></html>

React experimental_useFormStatus এর প্রয়োগ: উন্নত ফর্ম স্ট্যাটাস ম্যানেজমেন্ট

experimental_useFormStatus কী?

মৌলিক প্রয়োগ

পূর্বশর্ত

উদাহরণ: একটি সাধারণ কন্টাক্ট ফর্ম

`experimental_useFormStatus` কী?